---
title: Ajouter des icônes aux liens externes
description: Apprendre à installer un plugin rehype pour ajouter des icônes aux liens externes dans vos fichiers Markdown.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Le plugin rehype vous permet d'identifier et de modifier les liens dans vos fichiers Markdown qui pointent vers des sites externes. Cet exemple ajoute des icônes à la fin de chaque lien externe, afin que les visiteurs sachent qu'ils quittent votre site.

## Prérequis
- Un projet Astro utilisant Markdown pour les pages de contenu.

## Méthode

1. Installer le plugin `rehype-external-links`.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rehype-external-links
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rehype-external-links
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rehype-external-links
        ```
        </Fragment>
      </PackageManagerTabs>

2. Importez le plugin dans votre fichier `astro.config.mjs`.

	Passez `rehypeExternalLinks` au tableau `rehypePlugins`, avec un objet options qui inclut une propriété content. Définissez le `type` de cette propriété à `text` si vous souhaitez ajouter du texte brut à la fin du lien. Pour ajouter du HTML à la fin du lien, mettez la propriété `type` à `raw`.

    ```ts
    // ...
    import rehypeExternalLinks from 'rehype-external-links';

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });
    ```

:::note
  La valeur de la propriété `content` est [non représentée dans l'arbre d'accessibilité](https://developer.mozilla.org/fr-FR/docs/Web/CSS/content#accessibilité). Il est donc préférable d'indiquer clairement que le lien est externe dans le contenu qui l'entoure, plutôt que de se fier uniquement à l'icône.
:::

## Resources
- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)